/**
 * 文件夹侧边栏
 */

import Pubsub from '../../helper/Pubsub.js';
import State from '../../helper/State.js';

class SidebarFolder {
  constructor($wrapper) {
    const _this = this;

    _this.$wrapper = $wrapper;

    _this.tplHead =
`<div class="head">
  <label class="mdui-text-color-theme-secondary">项目</label>
</div>`;

    let tplEmpty =
`<div class="empty mdui-valign">
  <div class="content">
    <i class="mdui-icon material-icons mdui-text-color-theme-disabled mdui-m-b-2">folder</i>
    <div class="mdui-text-color-theme-secondary">没有打开的文件夹</div>
  </div>
</div>`;

    _this.$wrapper.html(_this.tplHead + tplEmpty);

    /**
     * 监听文件夹目录结构列出完成事件
     */
    Pubsub.subscribe('selected-folder-listed', (tree) => {
      _this.render(tree);
      Pubsub.emit('sidebar-directory-open');
    });

    /**
     * 点击文件夹、或文件时，更新 active 状态
     */
    $$(document).on('click', '#sidebar-folder .mdui-collapse-item-header, #sidebar-folder .file', function() {
      const $this = $$(this);

      $$('#sidebar-folder .mdui-collapse-item-header, #sidebar-folder .file').removeClass('active');
      $this.addClass('active');
    });

    /**
     * 从历史记录中打开文件时，移除文件夹中文件的激活状态
     */
    Pubsub.subscribe('open-file-from-history', () => {
      $$('#sidebar-folder .mdui-collapse-item-header, #sidebar-folder .file').removeClass('active');
    });

    /**
     * 点击文件时，打开文件
     */
    $$(document).on('click', '#sidebar-folder .file', function() {
      let $this = $$(this);
      let fileInfo = {
        fileName: $this.data('name'),
        filePath: $this.data('path')
      };

      State.addHistory(fileInfo);

      Pubsub.emit('file-opened', fileInfo);
      Pubsub.emit('open-file-from-folder');
    });
  }

  /**
   * 渲染目录
   * @param tree
   */
  render(tree) {
    const _this = this;

    let html = _this.renderChildren([tree]);

    // 打开根目录
    html = html
      .replace('mdui-collapse-item', 'mdui-collapse-item mdui-collapse-item-open');

    _this.$wrapper.html( `${_this.tplHead}<div class="folder">${html}</div>`);

    mdui.mutation();
  }

  /**
   * 渲染子目录
   * @param children
   */
  renderChildren(children) {
    const _this = this;

    let tpl = '';

    $$.each(children || [], function(i, file) {
      if (file.type === 'folder') {
        tpl +=
`<div class="mdui-collapse" mdui-collapse>
  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header mdui-ripple">
      <i class="mdui-collapse-item-arrow mdui-icon material-icons mdui-text-color-theme-icon">arrow_drop_up</i>
      <i class="mdui-icon material-icons mdui-text-color-theme-icon folder-close">folder</i>
      <i class="mdui-icon material-icons mdui-text-color-theme-icon folder-open">folder_open</i>
      ${file.name}
    </div>
    <div class="mdui-collapse-item-body">` + _this.renderChildren(file.children) + `</div>
  </div>
</div>`;
      } else {
        tpl +=
`<p class="file mdui-ripple" data-path="${file.path}" data-name="${file.name}">
  <i class="mdui-icon material-icons mdui-text-color-theme-icon folder-file">insert_drive_file</i>
  ${file.name}
</p>`;
      }
    });

    return tpl;
  }
}

export default SidebarFolder;